<template>
    <div class="card-play-deal-container">
        <div v-for="(playerCards, index) in cardGameStore.players" class="player-card">
            <SharedAvatar :index="index"></SharedAvatar>
            <SharedCardChip :cards="playerCards"> </SharedCardChip>
        </div>
    </div>
</template>

<script setup lang="ts">
import SharedCardChip from '../shared/SharedCardChip.vue';
import { useCardGameStore } from '../../stores/card-game.store';
import SharedAvatar from '../shared/SharedAvatar.vue';

const cardGameStore = useCardGameStore()

</script>

<style lang="scss" scoped>
.card-play-deal-container {
    display: grid;
    grid-template-columns: repeat(4, 25%);

    .player-card {
        margin: 1rem;
        border: 1px solid indigo;
        border-radius: 1rem;
    }
}
</style>